<template>
  <div class="UserComment">
    <div class="UserComment-title">
      <el-page-header @back="goBack" content="用户评论"></el-page-header>
    </div>
    <div class="UserComment-content">
      <el-form label-width="100px" ref="ruleForm" class="demo-ruleForm">
        <el-form-item prop="imageUrl" label="选择头像" style=" padding-left: 500px;">
          <el-upload
            class="avatar-uploader"
            action="/apis/api/setUserComment"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeupload"
          >
            <img v-if="imageUrl" id="img3" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item prop="val">
          <el-input v-model="val" placeholder="请输入内容" type="textarea" :rows="10"></el-input>
        </el-form-item>
        <el-form-item class="UserComment-content-button">
          <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { mapGetters } from "vuex";
import { setUserComment } from "../../ajax/index";
export default {
  data() {
    return {
      val: "",
      UserInfo: "",
      imageUrl: "",
      formData: new FormData(),
      file: ""
    };
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    submitForm(formName) {
      let config = {
        headers: {
          "Content-Type": "multipart/from-data"
        }
      };
      this.formData.append("val", this.val);
      axios
        .post("/apis/api/setUserComment", this.formData)
        .then(result => {
          if (result.code) {
            this.$message({
              message: result.data,
              type: "success"
            });
            this.$router.push({ path: "/home" });
          }
        })
        .catch(err => {});
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    beforeupload(file) {
      var than = this;
      var reads = new FileReader();
      reads.readAsDataURL(file);
      reads.onload = function(e) {
        than.imageUrl = this.result;
      };
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      this.formData.append("file", file);
      return false;
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    }
  },
  created() {
    this.UserInfo = this.getUSerName;
  },
  computed: {
    ...mapGetters({
      getUSerName: "getUSerName"
    })
  }
};
</script>

<style lang='scss'>
.UserComment {
  margin-top: 50px;
  .UserComment-title {
    text-align: center;
    font-size: 30px;
    .el-page-header {
      padding-left: 50px;
      border-bottom: 1px solid #cccccc;
      padding-bottom: 30px;
    }
  }
  .UserComment-content {
    margin-top: 100px;
    .UserComment-content-button {
      text-align: center;
      margin-top: 50px;
      .el-button--primary {
        margin-right: 50px;
      }
    }
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
}
</style>